<template>
  <div class="toolbar">
    <div class="toolbar-left">
      <el-button-group>
        <el-button type="primary" @click="handleOpenFile">
          <el-icon><Upload /></el-icon>
          打开文件
        </el-button>
        <el-button @click="handleOpenUrl">
          <el-icon><Link /></el-icon>
          从 URL 加载
        </el-button>
      </el-button-group>
      
      <el-divider direction="vertical" />
      
      <el-button-group>
        <el-button @click="handleFitView">
          <el-icon><FullScreen /></el-icon>
          适应视图
        </el-button>
        <el-button @click="handleResetView">
          <el-icon><Refresh /></el-icon>
          重置视图
        </el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-center" style="display: none">
      <el-button-group>
        <el-button @click="toggleProjection">
          <el-icon><Grid /></el-icon>
          {{ isOrtho ? '3D' : '2D' }}
        </el-button>
        <el-button @click="handleView('top')">顶视</el-button>
        <el-button @click="handleView('front')">前视</el-button>
        <el-button @click="handleView('left')">左视</el-button>
        <el-button @click="handleView('right')">右视</el-button>
        <el-button @click="handleView('back')">后视</el-button>
        <el-button @click="handleView('bottom')">底视</el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-right">
      <el-button-group>
        <el-button :type="isHighlightEnabled ? 'primary' : 'default'" @click="toggleHighlight">
          <el-icon><Select /></el-icon>
          {{ isHighlightEnabled ? '高亮开启' : '高亮关闭' }}
        </el-button>
        <el-button :type="isMeasuring ? 'primary' : 'default'" @click="toggleMeasure">
          <el-icon><Tools /></el-icon>
          测距
        </el-button>
<!--        <el-button @click="handleIsolate">-->
<!--          <el-icon><Hide /></el-icon>-->
<!--          隔离-->
<!--        </el-button>-->
<!--        <el-button @click="handleShowAll">-->
<!--          <el-icon><View /></el-icon>-->
<!--          显示全部-->
<!--        </el-button>-->
      </el-button-group>
    </div>
    
    <input
      ref="fileInput"
      type="file"
      accept=".ifc"
      style="display: none"
      @change="handleFileChange"
    />
    
    <el-dialog v-model="urlDialogVisible" title="从 URL 加载" width="500px">
      <el-form>
        <el-form-item label="IFC 文件 URL">
          <el-input v-model="modelUrl" placeholder="https://example.com/model.ifc" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="urlDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmUrl">加载</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Upload, Link, FullScreen, Refresh, Grid, Tools, Hide, View, Select } from '@element-plus/icons-vue'
import { useIfcStore } from '@/store'

const props = defineProps({
  service: {
    type: Object,
    default: null
  },
  canvasRef: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['loadFile', 'loadUrl'])

const fileInput = ref(null)
const urlDialogVisible = ref(false)
const modelUrl = ref('')
const isOrtho = ref(false)
const isMeasuring = ref(false)
const isHighlightEnabled = ref(false) // 高亮开关状态（默认关闭）
const store = useIfcStore()

// 监听 canvasRef 的变化，同步高亮状态
watch(() => props.canvasRef, (newCanvasRef) => {
  if (newCanvasRef && typeof newCanvasRef.isHighlightEnabled === 'function') {
    try {
      const currentState = newCanvasRef.isHighlightEnabled()
      isHighlightEnabled.value = currentState
    } catch (err) {
      // 忽略错误
    }
  }
}, { immediate: true })

function handleOpenFile() {
  fileInput.value?.click()
}

function handleOpenUrl() {
  urlDialogVisible.value = true
}

function handleFileChange(event) {
  const input = event.target
  const file = input.files?.[0]
  if (file) {
    emit('loadFile', file)
  }
  input.value = ''
}

function handleConfirmUrl() {
  if (modelUrl.value) {
    emit('loadUrl', modelUrl.value)
    urlDialogVisible.value = false
    modelUrl.value = ''
  }
}

function handleFitView() {
  props.service?.fitToView()
}

function handleResetView() {
  props.service?.fitToView()
}

function toggleProjection() {
  if (!props.service?.viewer) return
  try {
    const camera = (props.service.viewer)?.context?.ifcCamera?.camera
    if (camera) {
      isOrtho.value = !isOrtho.value
      camera.orthographic = isOrtho.value
    }
  } catch (err) {
    console.error('切换投影失败:', err)
  }
}

function handleView(type) {
  props.service?.setView(type)
}

function toggleHighlight() {
  isHighlightEnabled.value = !isHighlightEnabled.value
  if (props.canvasRef) {
    props.canvasRef.setHighlightEnabled(isHighlightEnabled.value)
  } else if (props.service) {
    // 如果 canvasRef 不可用，尝试通过 service 设置
    props.service.setHighlightEnabled(isHighlightEnabled.value)
  }
}

function toggleMeasure() {
  isMeasuring.value = !isMeasuring.value
  store.setMeasurementActive(isMeasuring.value)
  // TODO: 实现测量工具
}

function handleIsolate() {
  // TODO: 隔离选中元素
}

function handleShowAll() {
  props.service?.showAll()
}
</script>

<style scoped>
.toolbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #1a1d24;
  border-bottom: 1px solid #2a3242;
}

.toolbar-left,
.toolbar-center,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

